<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { isBoolean, isNumber, isString } from 'lodash'
import ComponentAttrList from '@/components/editor/ComponentAttrList.vue'
import CanvasAttrList from '@/components/editor/CanvasAttrList.vue'
import { useDesignStore } from '@/store/design'
import { SvgIcon } from '@/components'

const store = useDesignStore()

const currentIndex = computed(() => store.$state.curComponentIndex)

const value = ref<'component' | 'canvas'>('component')

const options = computed(() => [{
  label: '页面配置',
  value: 'canvas',
  disabled: false,
  icon: 'i-mage:preview-circle-fill',
}, {
  label: '组件配置',
  value: 'component',
  disabled: currentIndex.value === -1,
  icon: 'i-mage:preview-circle-fill',
}])

watch(currentIndex, (n) => {
  if (n === -1 && value.value === 'component') {
    value.value = 'canvas'
  }
  else if (n >= 0 && value.value === 'canvas') {
    value.value = 'component'
  }
}, {
  immediate: true,
})
</script>

<template>
  <div class="h-full w-[350px] flex flex-col p-2">
    <el-card body-class="p-2" class="mb-2">
      <el-segmented v-model="value" :options="options" block>
        <template #default="{ item }">
          <el-space v-if="!isString(item) && !isNumber(item) && !isBoolean(item)">
            <SvgIcon :name="item?.icon" />
            <span>{{ item?.label }}</span>
          </el-space>
        </template>
      </el-segmented>
    </el-card>
    <el-scrollbar class="h-0 flex-auto">
      <CanvasAttrList v-if="value === 'canvas'" />
      <ComponentAttrList v-else />
    </el-scrollbar>
  </div>
</template>
